import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './pages/home';
import { RouteObject, RouterProvider,createHashRouter,Route ,HashRouter, Routes} from 'react-router-dom';
import type  {RouteType} from './config/routes';
import { routesConfig } from './config/routes';
import RouteGuard from './components/RouteGuard';
import { useSelector,useDispatch } from 'react-redux';
import { RootState } from './config/store';
function App() {
  const routes = useSelector((state: RootState) => state.router.routes)
  return (
    <HashRouter>
      <RouteGuard>
        <Routes>
          {generateRoutes(routes)}
        </Routes>
      </RouteGuard>
    </HashRouter>
  )
}
function generateRoutes(routes:RouteType[]) {
  return routes.map((item) => {
    return <Route key={item.path} path={item.path} element={item.element} >{item.children && generateRoutes(item.children)}</Route>
  })
}
export default App;


// const [routes, setRoutes] = useState<RouteType[]>([...routesConfig,{path:"/adding",element:<div onClick={()=>routesChange([])}>添加路由</div>}])

  // function routesChange(iRoutes:RouteType[]) {
  //   setRoutes([...routes,{path:"/added",element:<div>added</div>}])
  // }
  // const r = createHashRouter(routesConfig)
  // return (
  //   <HashRouter>
  //     <RouteGuard>
  //       <Routes>
  //         {generateRoutes(routes)}
  //       </Routes>
  //     </RouteGuard>
  //   </HashRouter>
  // )
